Working with the Viewer > Customizing the Viewer > Customization Overview > Customization Examples > Adding a Custom Button |
Adding a custom button is as simple as adding some markup and a little bit of JavaScript anywhere on the web page. In this example below, we will look at adding a button to the Viewer in a way that matches the design language and code style of the existing HTML5 Viewer.
If you are not yet familiar with the code structure, refer to these topics:
In this topic, we will add a button to the default View tab which will add an Approved stamp redaction to the top right of the first page in the document.
The bulk of the viewer markup is inside the file viewerTemplate.html; this includes all the toolbars and vertical slide-outs.
If you would like to add buttons to the context menu, the annotations saving dialog, or the print dialog, these are found in separate files. |
The View tab appears at the top of the document, and is identified by the data attribute data-pcc-nav-tab="view". Inside the .pcc-tab-pane, the actual menu bar, there are two lists of buttons. One is the normal list starting from the left, .pcc-left, and the second is the buttons floating on the right side, .pcc-pull-right. To add the button on the right side:
Example |
Copy Code
|
---|---|
<div class="pcc-pull-right"> <button class="myCustomApprovedButton">Approve</button> <button class="pcc-icon pcc-icon-print" data-pcc-print="launch"></button> <button data-pcc-download class="pcc-icon pcc-icon-download"></button> </div> |
You've added the button in bold to the rest of the list, to appear first in the right-hand side buttons.
Associating logic to the buttons is handled in the viewer.js file.
First, find the button in the DOM. Toward the top of the file, there is a property on the viewer, this.viewerNodes, which holds all of the viewer DOM elements. Add the button to the end of the list:
Example |
Copy Code
|
---|---|
... $searchBeginsWith: viewer.$dom.find("[data-pcc-search=beginsWith]"), $searchEndsWith: viewer.$dom.find("[data-pcc-search=endsWith]"), $searchWildcard: viewer.$dom.find("[data-pcc-search=wildcard]"), $customApproved: viewer.$dom.find(".myCustomApprovedButton") }; |
We have used a variable name starting with a $, the global name of jQuery, to indicate that this is a jQuery-wrapped variable. Any time a variable name starts with a $ in this file, it indicates that the object is able to use the entire jQuery API. |
Second, add logic to the button’s click event. A few lines down from this section is the function bindMarkp, where logic is added to the DOM nodes. To keep with convention, go all the way to the bottom of this function, and add the click handler there:
Example |
Copy Code
|
---|---|
viewer.viewerNodes.$customApproved.on("click", function (ev) { // get the first page attributes viewer.viewerControl.requestPageAttributes(1).then( function success(attributes) { // let's add a stamp now var mark = viewer.viewerControl.addMark(1, "StampRedaction"); // set the stamp text mark.setLabel("Approved"); // set the stamp location mark.setRectangle({ width: 180, height: 50, x: attributes.width - 200, y: 20 }); }, function failed(error) { // :( tell the user there was an error alert(error); }); }); |
First, add a new custom icon to the CSS vocabulary. To support all browsers and screen types, you will need two icons: a 26x26 pixel icon, and a 40x40 pixel icon. For this example, let’s assume that you have icons already created, named check.png and check@2x.png, respectively and the icons are available in the images folder.
The HTML5 Viewer uses an icon sprite in order to optimize icon image loading. In this example, you will not be using the sprite, and instead include standalone images. |
Toward the top of the viewer.css file, there are the icon definitions, in the form of .pccv .pcc-icon-.... You will add the new icon at the end of this section:
Example |
Copy Code
|
---|---|
.pccv .custom-icon-check { background-image: url(../img/check.png); } |
Note that to support IPS screens, you will need to add a second icon inside the @media (min-width:0) media query. This media query targets all modern browsers capable of scaling icons, to ensure that any high density screen attached to a browser (that can scale icons) will get high resolution images. Here, you will add out 2x icon image:
Example |
Copy Code
|
---|---|
.pccv .custom-icon-check { background-image: url(../img/check@2x.png); background-size: 26px; background-position: center; } |
Finally, update your HTML markup to use this new icon instead of text:
Example |
Copy Code
|
---|---|
<button class="myCustomApprovedButton pcc-icon custom-icon-check"></button> |
You have completed adding a custom button.